<template>
  <div id="editInfo">
    <p @click="handleclick">
      <span class="left">{{left}}</span>
      <span class="right">
        <slot name="right"/>
        <span class="icon">
          <slot name="icon"/>
        </span> 
      </span>
    </p>
  </div>
</template>

<script>
export default {
  props:["left"],
  methods:{
    handleclick(){
      this.$emit("handleclick")
    }
  }
};
</script>

<style lang="less" scoped>
#editInfo {
  background-color: white;
  p {
    margin-top: 0.278vw;
    padding: 2.222vw 4.167vw;
    display: flex;
    justify-content: space-between;
    .left {
      // background-color: red;
      margin: auto 0;
      height: 8.333vw;
      width: 27.778vw;
      padding-right: 8.333vw;
      text-align: left;
      line-height: 8.333vw;
      font-size: 3.611vw;
    }
    .right {
      display: flex;
      line-height: 8.333vw;
      font-size: 3.611vw;
      color: rgb(148, 146, 146);
      vertical-align: middle;
      .icon{
        height: 5.556vw;
        width: 5.556vw;
        padding-bottom: 0.833vw;
        text-align: right;
        // line-height: 9.722vw;
        margin: auto 0;
        
      }
    }
  }
}
</style>
